<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
	
	
	xmlns:composite="http://xmlns.jcp.org/jsf/composite">

<composite:interface name="inlineEditor">
	<composite:attribute name="fieldProperty" required="true" />
	<composite:attribute name="fieldName" required="true"
		shortDescription="Type initial letter uppercase." />
	<composite:attribute name="placeHolder" required="false"
		default="Please fill in this text attribute." />
	<composite:attribute name="styleClass" default="" />
</composite:interface>

<composite:implementation
	xmlns:mywidgets="http://xmlns.jcp.org/jsf/composite/widgets">

	<ui:param name="styleClass"
		value="#{empty cc.attrs.styleClass ? attrLc : cc.attrs.styleClass}" />
	<c:set var="enrichedPlaceHolder"
		value="#{pubController.enrichPlaceholder(cc.attrs.placeHolder)}" />
	<c:set var="attr" value="#{cc.attrs.fieldName}" />
	<c:set var="attrUpdateMethod" value="update#{attr}" />


	<div id="div#{attr}">
		#{pubController.getCurrentTimeStampFormatted()}</div>

	<a4j:jsFunction name="#{attrUpdateMethod}">
		<a4j:param name="#{attr}" assignTo="#{cc.attrs.fieldProperty}" />
	</a4j:jsFunction>

	<!-- This is a hack to hide the input -->
	<input type="text" id="input#{attr}"
		style="border: 0px; height: 0; width: 0; overflow: hidden; padding: 0;" />
	<script>
	 $(function() {
		 $("#input#{attr}").datepicker({
			 changeMonth: true,
			 changeYear: true,
			 numberOfMonths: 2,
			 showButtonPanel: true,
			 dateFormat: '#{pubController.dateFormatting}'
			 });

		 $("#div#{attr}").click(function() {
			 $("#input#{attr}").focus();
		        });

	    	$("#input#{attr}").change(function() {
	    		$("#div#{attr}").html($("#input#{attr}").val());
	    	});
	    }
	    );

		jQuery(document).ready(function(){
			jQuery('#div#{attr}').bind('DOMSubtreeModified', function(event) {		
				if(CKEDITOR.status == "loaded" &amp;&amp; isReady){
					var text = jQuery("#input#{attr}").val();												  
			    	if(text == ""){							    	
				    	text = "#{enrichedPlaceHolder}";
				    	CKEDITOR.instances.div#{attr}.setData("#{enrichedPlaceHolder}");		    	
			    	} else{	
				    	#{attrUpdateMethod}(text);
			    	}			        				        					    
				}
			})			
		})					
	</script>

</composite:implementation>
</html>